<template>
  <div class="im-i" :class="{ showBottom: showBottom }">
    <div class="im-i-main">
      <div class="image-emoji" @click="toggleBottom('emoji')">
        <img src="../images/smile.png" />
      </div>
      <!-- div模拟input框 -->
      <div
        :contenteditable="true"
        ref="IMInput"
        class="im-field"
        @input="handleInput"
        @blur="handleBlur"
        @focus="handleFocus"
      ></div>
      <div
        class="image-emoji"
        style="margin-right: 4px"
        @click="toggleBottom('plus')"
      >
        <img
          src="../images/more-select.png"
          :class="{ rotate: showBottom && bottomMode === 'plus' }"
        />
      </div>
      <div class="send-btn" :class="{ active: text }" @click="sendMsg">
        发送
      </div>
    </div>
    <div class="im-i-bottom">
      <emoji-select @selectEmoji="selectEmoji" v-if="bottomMode === 'emoji'" />
      <multi-select
        v-if="bottomMode === 'plus'"
        @after-read="afterRead"
        @showOrderPopup="showOrderPopup"
      />
    </div>
  </div>
</template>

<script>
import EmojiSelect from './emoji-select.vue';
import MultiSelect from './multi-select.vue';
// writing-mode: vertical-lr;

export default {
  data() {
    return {
      text: '',
      showBottom: false,
      bottomMode: '',
      showOrder: false
    };
  },
  components: { EmojiSelect, MultiSelect },
  methods: {
    selectOrder(order) {
      this.showOrder = false;
      this.$emit('selectOrder', order);
    },
    showOrderPopup() {
      this.showOrder = !this.showOrder;
    },
    handleFocus() {
      this.showBottom = false;
      this.$emit('toggleBottom', false);
      /* 解决点击加号展开后，再点击输入，覆盖问题 */
      setTimeout(() => {
        window.scrollTo(0, 10000);
      }, 200);
    },
    handleInput() {
      if (this.$refs.IMInput && this.$refs.IMInput.innerText) {
        this.text = this.$refs.IMInput.innerText.trim();
      }
    },
    handleBlur() {
      /* before blur */
      this.isFromBlur = true;
      /* 这样设置可以延迟blur，优先触发发送按钮的 touch事件 */
      /* blur */
      setTimeout(() => {
        /* 判断是不是点击发送按钮的blur */
        if (this.isFromBlur) {
          window.scrollTo(0, 0);
        }
        this.isFromBlur = false;
      }, 100);
    },

    pickUpKeyboard() {
      if (this.$refs.IMInput) {
        this.$refs.IMInput.blur();
        this.showBottom = false;
        this.$emit('toggleBottom', false);
      }
    },
    sendMsg() {
      if (this.isFromBlur) {
        this.$refs.IMInput.focus();
        this.isFromBlur = false;
      }
      if (this.text.match(/^\s*$/)) {
        this.$toast.fail('不能发送空白消息');
        return;
      }
      this.$emit('sendMsg', this.text);
      this.text = '';
      if (this.$refs.IMInput) {
        this.$refs.IMInput.innerText = '';
      }
    },
    toggleBottom(type) {
      if (this.showBottom && this.bottomMode !== type) {
        this.bottomMode = type;
        this.$emit('toggleBottom', this.showBottom);
      } else {
        this.bottomMode = type;
        setTimeout(() => {
          this.showBottom = !this.showBottom;
          this.$emit('toggleBottom', this.showBottom);
        }, 100);
      }
    },
    selectEmoji(key) {
      if (key === '[删除]') {
        if (this.text) {
          // 中文、英文、数字
          if (/\[[\w\u4e00-\u9fa5]*\]$/.test(this.text)) {
            this.text = this.text.replace(/\[[\w\u4e00-\u9fa5]*\]$/, '');
          } else {
            const len = this.text.length;
            this.text = this.text.substring(0, len - 1);
          }
        }
      } else {
        this.text = `${this.text}${key}`;
      }
      if (this.$refs.IMInput) {
        this.$refs.IMInput.innerText = this.text;
      }
    },
    afterRead(fileObj) {
      this.$emit('after-read', fileObj);
    }
  }
};
</script>
<style>
/*输入框获得焦点可弹出软键盘，却没有光标闪烁，也无法正常输入  -webkit-user-select:none 导致的*/
*:not(input, textarea) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
</style>
<style lang="scss" scoped>
.im-i {
  position: fixed;
  left: 0;
  bottom: -170px;
  width: 100%;
  &.showBottom {
    bottom: 0;
  }
  .im-i-main {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .im-field {
      width: 214px;
      min-height: 33px;
      max-height: 70px;
      overflow-y: auto;
      background: rgba(248, 248, 248, 1);
      border-radius: 17px;
      caret-color: rgba(88, 108, 148, 1);
      font-size: 14px;
      padding: 7px 14px 6px;
      border: none;
      box-sizing: border-box;
      outline: none;
      resize: none;
      line-height: 20px;
      //user-select: text;
      //-webkit-user-select: text;
      &:empty:before {
        content: '请输入您要咨询的问题';
        color: #cccccc;
      }
      &:focus:before {
        content: none;
      }
    }
    .image-emoji {
      width: 24px;
      height: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 24px;
        height: 24px;
        transition: all 0.2s;
        &.rotate {
          transform: rotate(45deg);
        }
      }
    }
    .send-btn {
      width: 58px;
      height: 32px;
      background: rgba(204, 204, 204, 1);
      border-radius: 17px;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFangSC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      &.active {
        background: rgba(88, 108, 148, 1);
      }
    }
  }
  .im-i-bottom {
    min-height: 170px;
  }
  .order-popup {
    height: 505px;
    border-radius: 10px 10px 0px 0px;
  }
}
</style>
